import screenfull from "screenfull";
/**
 * @description: 全屏hook
 * @param {string} ele - document选择器，不传为 screenfull-box
 * @return {*} isFull - 是否全屏状态；fullScreen - 全屏方法
 */
export default function useScreenFull(ele = ".screenfull-box") {
  const isFull = ref(false);
  const fullScreen = () => {
    nextTick(() => {
      if (screenfull.isEnabled && !isFull.value) {
        screenfull.request(document.querySelector(ele));
      } else {
        screenfull.toggle();
      }
    });
  };
  window.addEventListener("resize", () => {
    isFull.value = window.fullscreen || document.webkitIsFullScreen;
  });
  // 监听屏幕的全屏，关闭全屏
  document.addEventListener("fullscreenchange", function (event) {
    if (document.fullscreenElement) {
      isFull.value = true;
    } else {
      isFull.value = false;
    }
  });

  return {
    isFull,
    fullScreen,
  };
}
